<template>
	<view class="wrap">
		<view class="search">
			<u-search v-model="keywords" @custom="search" @search="search"></u-search>
		</view>
		<scroll-view class="scroll-list msg-list-item" scroll-y="true">
			<u-card v-for="(item,index) in orderList" :key="index" class="task-list-item" :border="false" padding="20"
				margin="20rpx">
				<view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
					<view style="display: flex;align-items: center;font-size: 30rpx;">
						<image class="user-images" :src="item.avatar" />
						与{{item.nickname}}的约课订单
					</view>
				</view>
				<view class="" slot="body">
					<u-row gutter="20">
						<u-col span="12" class='col'>
							<view class="apply-text">
								<span>订单编号：</span>
								{{item.id}}
							</view>
						</u-col>
						<u-col span="12" class='col'>
							<view class="apply-text">
								<span>订单状态：</span>
								{{getStatus(item.order_status)}}
							</view>
						</u-col>
						<u-col span="12" class='col'>
							<view class="apply-text"><span>提交时间：</span>{{item.time}}</view>
						</u-col>
						<u-col span="12" v-if="item.evaluation!=10" class='col'>
							<view class="apply-text">
								<span>用户评价：</span>
								<u-rate active-icon="heart-fill" inactive-icon="heart" :current="item.evaluation"
									:disabled="true" />
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="apply-list-foot" slot="foot" :style="item.pay_status===0?footer1:footer2">
					{{item.pay_status===0?'未支付':'已支付'}}
				</view>
			</u-card>
			<u-divider>已经到底了</u-divider>
		</scroll-view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				keywords: '',
				orderList: [],
				footer1: {
					textAlign: 'right',
					color: '#ff4400'
				},
				footer2: {
					textAlign: 'right',
					color: '#00aa00'
				}
			}
		},
		methods: {
			getStatus(val) {
				if (val === 500) {
					return '未完成'
				} else if (val === 501) {
					return '进行中'
				} else if (val === 502) {
					return '已完成'
				}
			}
		},
		onLoad() {
			this.orderList = this.$store.state.myOrder
		}
	}
</script>

<style lang="scss">
	@import '../../../common/uni.css';

	page {
		background-color: #f5f5f5;
	}

	image {
		border-radius: 50%;
	}

	.wrap .search {
		background: #ffffff;
	}

	.u-dropdown {
		background: #ffffff;
	}

	.msg-time {
		font-size: 26rpx;
		padding: 5px 0;
		color: #999999;
		text-align: center;
	}

	.u-card__foot {
		.u-icon {
			margin-right: 10px;
		}
	}

	.apply-text {
		font-size: 28rpx;
		color: #333333;

		span {
			color: #999999;
		}
	}

	.user-images {
		width: 28px;
		height: 28px;
		margin-right: 8px;
	}

	.apply-list-foot {
		font-size: 28rpx;
		justify-content: space-around;
	}

	.personnel-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.personnel-user {
			position: relative;
			margin: 5px 9px 0;
		}

		.user-images {
			width: 32px;
			height: 32px;
			margin-right: 0;

		}

		.iconfont {
			position: absolute;
			top: -12px;
			right: -5px;
			color: #FE0100;
		}
	}

	.agree-text {
		color: #4094ff;
	}

	.refuse-text {
		color: #ff4400;
	}

	.col {
		margin: 15rpx;
	}
</style>
